<template>
	<view class="components-home">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false" class="nav-custom" addHeight>
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">检查上报</block>
		</cu-custom>
		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<u-tabs
				class="tabs-app"
				active-color="#fff"
				inactive-color="#fff"
				bg-color="#2695FE"
				style="height: 80rpx; padding: 0 20rpx"
				:bold="false"
				font-size="28"
				:list="list"
				:is-scroll="false"
				:current="current"
				@change="changeTabs"
			></u-tabs>
			<view class="app-box-content">
				<events ref="events" v-if="pageCur == 'events'"></events>
				<security ref="security" v-if="pageCur == 'security'"></security>
				<overview ref="overview" v-if="pageCur == 'overview'"></overview>
			</view>
		</view>
	</view>
</template>

<script>
	import events from '@/components/decision/events.vue'
	import overview from '@/components/decision/overview.vue'
	import security from '@/components/decision/security.vue'
	export default {
		components: { events, overview, security },
		data() {
			return {
				appHeight: 0,
				current: 0,
				pageCur: 'events',
				list: [
					{ name: '应急事件', value: 'events' },
					{ name: '安全检查', value: 'security' }
					// { name: '汛情总览', value: 'overview' }
				]
			}
		},
		onShow() {},
		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
			// uni.$on('changeTabbarChild', (data) => {
			// 	console.info(`data:`, data)
			// })

			uni.$on('changeTabbarChild', (data) => {
				console.info(`data:`, data)
				if (data.pageCur == 'decision' && data.tab) {
					this.pageCur = data.tab
					this.current = this.list.findIndex((el) => el.value == data.tab)
					if (data.current) {
						this.$nextTick(() => {
							this.$refs[data.tab].setTab(data.current)
						})
					}
				}
			})
		},
		beforeDestroy() {
			uni.$off('changeTabbarChild')
		},
		computed: {},

		methods: {
			changeTabs(index) {
				this.current = index
				this.pageCur = this.list[index].value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-box {
		width: 100%;
		.app-box-content {
			height: calc(100% - 80rpx);
		}
		.tabs-app {
			z-index: 999;
		}
	}
</style>
